<template>
    <div class="Testing_Top">
        <p style="font-size: 14px; font-weight: 700; color: rgba(162, 182, 255, 1);">
            设备检测
        </p>
    </div>
    <div class="NormalAndAbnormal">
        <div class="NormalAndAbnormal_Left">
            <img src="@/assets/Photo_NormalAndAbnormal.png" alt="">
        </div>
        <div class="NormalAndAbnormal_Right" ref="chart">

        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';

const chart = ref(null);
let myChart = null;

const Testing = () => {
    myChart = echarts.init(chart.value);
    window.addEventListener('resize', function () {
        myChart.resize();
    });

    const option = {
        grid: {
            left: '25%',
            right: '10%',
            top: '10%',
            bottom: '10%',
        },
        xAxis: {
            type: 'value',
            show: false,  // 隐藏 x 轴
        },
        yAxis: {
            type: 'category',
            data: ['正常设备', '异常设备'],  // 两个类别
            inverse: true,  // 反转 y 轴，使文字在上，柱状图在下
            axisLabel: {
                color: '#fff',  // y 轴标签颜色
                position: "top",
                // padding: [0, 0, 20, 0],  // 给标签添加向下的内边距，使其与柱状图有些距离
            },
            axisLine: {
                show: false,  // 隐藏 y 轴线
            },
            axisTick: {
                show: false,  // 隐藏刻度线
            },
        },
        series: [
            {
                type: 'bar',
                data: [240, 140],  // 示例数据
                barWidth: 10,  // 条形图的宽度
                label: {
                    show: true,
                    position: 'right',  // 在条形图右侧显示数值
                    formatter: '{c}',
                    color: function (params) {
                        return params.dataIndex === 0 ? 'lime' : 'red';  // 正常设备显示绿色，异常设备显示红色
                    },
                    fontSize: 10,
                },
                itemStyle: {
                    color: function (params) {
                        // 设置不同的渐变色
                        if (params.dataIndex === 0) {
                            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                { offset: 0, color: '#00f0ff' },
                                { offset: 1, color: '#00ff99' }
                            ]);
                        } else {
                            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                { offset: 0, color: '#ff0000' },
                                { offset: 1, color: '#8B0000' }
                            ]);
                        }
                    },
                    // borderColor: function (params) {
                    //     return params.dataIndex === 0 ? 'lime' : 'red';  // 边框颜色
                    // },
                    // borderWidth: 2,  // 边框宽度
                    borderRadius: 10,  // 圆角边框
                },
            },
        ],
    };
    myChart.setOption(option);
}
onMounted(() => {
    Testing();
})
onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();  // 销毁图表实例，清理资源
    }
});
</script>

<style lang="scss" scoped>
.Testing_Top {
    position: fixed;
    right: 80px;
    top: 70px;
    width: 350px;
    height: 30px;
    background-image: url('../../assets/CombinedShape.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 30px;

    p {
        margin-left: 14px;
    }
}

.NormalAndAbnormal {
    position: fixed;
    right: 80px;
    top: 110px;
    width: 350px;
    height: 120px;
    background: rgba(12, 29, 95, 1);
    display: flex;

    .NormalAndAbnormal_Left {
        width: 100px;
        height: 120px;
        // background: red;
        display: flex;
        justify-content: space-around;
        align-items: center;

        img {
            width: 70px;
            height: 70px;
        }
    }

    .NormalAndAbnormal_Right {
        width: 230px;
        height: 120px;
        margin-left: 20px;
    }
}
</style>